<template>
  <div class="footerBoxFixed">
    <van-tabbar v-model="active" :route="true"  active-color="#41C856"  inactive-color="#999">
    <van-tabbar-item replace to="/home/index"  icon="home-o">精选</van-tabbar-item>
    <van-tabbar-item replace :to="match" icon="search">分类</van-tabbar-item>
    <van-tabbar-item replace to="/home/opgc" icon="description">小萌书</van-tabbar-item>
    <van-tabbar-item replace to="/cart" icon="cart-o">购物车</van-tabbar-item>
    <van-tabbar-item replace to="/home/user" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>

    </div>
</template>
 
<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  data() {
    return {
        active: 0,
      icon: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
      },
    };
  },
    methods:{
        handleClick() {
            console.log(this.$route.path)
        }
    },
    computed:{
        match(){
        return this.$route.path.includes('/home/classify/') ? this.$route.path : '/home/classify/tab1'
    },
    },
    mounted() {
    }
};
</script>
 
<style scoped lang = "stylus">
.footerBoxFixed .menuBox
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    -webkit-box-shadow: 1px 2px 25px 0px rgba(0,0,0,0.1);
    box-shadow: 1px 2px 25px 0px rgba(0,0,0,0.1);
.menuBox-nav 
    height: 52px;
    background: #fff;
.flex
    display flex
.menuBox-nav a 
    font-size: 14px;
    color: #666;
    text-align: center;
    padding-top: 4px;
.it1, .it2 {
    display: block;
    min-width: 0;
}

.it1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.mNavIco
    display: block;
    margin: auto;
    width: 45px;
    height: 45px;
    background: url(../../assets/img/nav-bc.png) 0 0 no-repeat;
    background-size: 385px auto;
/* .current .mNavIco1 {
    background-position: 0px -58px;
}
.mNavIco2{
    background-position: -52px -58px;
}
.mNavIco3 {
    background-position: -181px -2px;
}
.mNavIco4 {
    background-position: -113px -2px;
}
.mNavIco5{
    background-position: -255px -2px;
} */
</style>
